<template>
     <div class="iot_left">
       <div class="iot_calendar">
           <div class="iot_calendar_top">
               <div class="iot_fire"></div>
               <div class="iot_teaching_weeks">
                   <p id="week" style="float: left;font-size: 15px;margin-left: 10px;margin-top: 10px;font-weight: bold">第&nbsp;&nbsp;8&nbsp;&nbsp;教学周</p>
                   <a href="https://jiaowu.sicau.edu.cn/web/web/web/xl2022-2023.pdf" target="_blank" style="float:right;margin-right: 10px;margin-top: 10px;color: #1d9adb;font-weight: bold">【校历】</a>
               </div>
           </div>
           <div class="iot_calendar_year" >
               <div id='pre' @click="pre">&lt;</div>
               <div class="iot_calendar_title">
                   <p>{{ date }}</p>
                   <p>今天</p>
               </div>
             <div id="next" @click="next">&gt;</div>
           </div>
           <div>
                 <ul class="iot_calendar_montosun">
                     <li class="item">日</li>
                     <li class="item">一</li>
                     <li class="item">二</li>
                     <li class="item">三</li>
                     <li class="item">四</li>
                     <li class="item">五</li>
                     <li class="item">六</li>
                 </ul>
           </div>
           <div>
               <ul class="iot_calendar_day">
                <li v-for="(d,k) in list " :key="k">{{ d }}</li>
               </ul>
           </div>

       </div><!-- 日历  -->
       <div class="iot_quick_entry">
          <div class="iot_quick_entry_title">
              快捷入口
          </div>
           <div>
               <ul class="iot_quick_entry_ul">
                   <li><a href="https://dzzm.sicau.edu.cn:30813/transcript_server/login"><font color="black"><span class="iot_ fa fa-magic"></span>学生自助打印云平台</font></a></li>
                   <li><a href="http://www.zhihuishu.com/"><font color="black"><span class="iot_ fa fa-magic"></span>智慧树学习平台</font></a></li>
                   <li><a href="http://sicau.fanya.chaoxing.com/portal"><font color="black"><span class="iot_ fa fa-key"></span>超星学习平台</font></a></li>
                   <li><a href="http://vrlab.sicau.edu.cn"><font color="black"><span class="iot_ fa fa-heartbeat"></span>虚拟仿真实验平台</font></a></li>
                   <li><a href="http://202.115.182.32:8080/BKLW/"><font color="black"><span class="iot_ fa fa-pencil"></span>优秀学士论文查询</font></a></li>
               </ul>
           </div>
       </div><!--快捷入口-->

   </div><!--   日历和快捷入口    -->
</template>

<script>
export default {
  name:'CalendarAndFast',
  data() {
    return {
        Date:new Date(),
        year:new Date().getFullYear(),
        month:new Date().getMonth()+1,
        day:new Date().getDate()
    }
  },
  computed:{
    list(){
        let arr=[]
        for(var i=1;i<=this.daysInThisMonth;i+=1){
            arr.push(i)
        }
        return arr
    },
    date(){
        return this.year+'-'+this.month+'-'+this.day
    },
    
    daysInPreMonth() { 
      return new Date(this.year, this.month-1, 0).getDate(); // 创建上 个月的日期对象，并获取该日期的0号（上个月的最后一天），即当前月的最后一天，返回该日期的天数即可
    
  },
  daysInThisMonth(){
    return new Date(this.year, this.month, 0).getDate(); // 创建这个月的日期对象，并获取该日期的0号（这个月的最后一天），即当前月的最后一天，返回该日期的天数即可
  },
},
  methods: {
    pre(){
       const predays=this.daysInPreMonth
       this.day-=1
       if (this.day<1) {
          if(this.month-1<=0){
            this.month=12
            this.year-=1
          }
          else(
            this.month-=1
          )
          this.day=predays
       }
    },
    next(){
       const thisdays=this.daysInThisMonth
       this.day+=1
       if(this.day>thisdays){
         this.month+=1
        if(this.month>12){
            this.month=1
            this.year+=1
        }
         this.day=1
       }

    },
    show(){
        var days=document.querySelectorAll('.iot_calendar_day>li')
        for(const d of days){  
            d.className=''     
           if(d.innerHTML>this.day){
             d.className='will'
           } 
           if(d.innerHTML==this.day){
              d.className='active'
           }
        }
    }
  },
  mounted() {
       this.show()
    
  },
  
  updated() {
    this.show()
  },
}
</script>

<style>
  .iot_left{
            margin-right: 20px;
            margin-left: 60px;
            width: 220px;
            height: 551px;
            background-color: #ffffff;
            float: left;
        } /*日历和快捷入口*/

        .iot_calendar{
            width: 220px;
            height: 280px;
            border: 1px;
            background-color: #ffffff;
            border: 1px solid rgba(0,0,0,0.2);
        }  /* 日历 */
        .iot_calendar_top{
            width: 220px;
            height: 35px;
        }
        .iot_calendar_year{
            padding: 0;
            width: 100%;
            height: 35px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: #1d9adb;
            
        }
        #pre{
            width: 10%;
            height: 100%;
            color: white;
            display: flex;
            align-items: center;
            font-size: 18px;
            cursor: pointer;
        }
        #next{
            widows: 10%;
            height: 100%;
            color: white;
            display: flex;
            align-items: center;
            font-size: 18px;
            cursor: pointer;
        }
        .iot_calendar_title{
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 80%;
            height: 100%;
            font-size: 14px;
            color: white;
        }
        .iot_calendar_montosun{
            width: 210px;
            height: 30px;
            float: left;
        }
        .iot_calendar_montosun>li{
            float: left;
           margin-left: 14px;
            color: #8d8c8c;
        }
        .iot_calendar_day{
            width: 210px;
            height: 180px;
            float: left;
            text-rendering: optimizeLegibility !important;
           -webkit-font-smoothing: antialiased;
            letter-spacing: 0.7px;
            font-family: "Microsoft Yahei";
            font-size: 14px;
            color: #888;
            list-style: none;
            margin-left: 8px;
            padding: 0;
            overflow: hidden;
        }
        .iot_calendar_day>li{
            text-rendering: optimizeLegibility !important;
          -webkit-font-smoothing: antialiased;
          letter-spacing: 0.7px;
          font-family: "Microsoft Yahei";
          color: #000000;
          list-style: none;
          margin: 0;
          padding: 0;
          float: left;
          width: 30px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          border-radius: 50%;
          cursor: pointer;
          font-size: 14px;
        }
        .iot_calendar_day>li:hover{
            background-color: #e75b5b;
        }
        .iot_calendar_day>li.active{
            background-color: #e75b5b;
        }
        .iot_calendar_day>li.will{
            color: gray;
        }
        .iot_fire{
            width: 20px;
            height: 20px;
            background-image: url("../images/fire.png");
            background-size: contain;
            float: left;
            margin-left: 8px;
            margin-top: 8px;
        }

        .iot_quick_entry{
            display: block;
            margin-top: 20px;
            width: 220px;
            height: 248px;
            border: 1px;
        }  /*快捷入口*/
        .iot_quick_entry:hover{
             box-shadow: 1px 1px 4px 6px rgba(0, 0, 0, 0.2);
            /*左右偏移、上下偏移、模糊距离、阴影尺寸、颜色*/
        }
        .iot_quick_entry_title{
            width: 209px;
            height: 27px;
            background-color: #1d9adb;
            padding-top: 8px;
            padding-left: 13px;
            float: left;
            color: #fff;
            font-size: 16px;
            font-weight: bold;
        }
        .iot_quick_entry_ul{
            color: black;
            list-style: none;
            float: left;
            height: 209px;
            width: 220px;
            line-height: 55px;
            font-size: 14px;
            border-right: 1px solid rgba(0,0,0,0.2);
            border-left: 1px solid rgba(0,0,0,0.2);
            border-top: 1px solid rgba(0,0,0,0.2);
            border-bottom: 1px solid rgba(0,0,0,0.2);

        }
        .iot_quick_entry_ul>li>a{
            display: block;
        }
        .iot_quick_entry_ul>li{
            border-bottom: 1px solid rgba(0, 0, 0,0.2);
            font-size: 14px;
            color: #fff;
            line-height: 21px;
            display: block;
            padding: 10px 31px 10px 10px;
        }
        .iot_quick_entry_ul>li:hover{
            background-color: #555555;
        }
        span[class^="iot_ fa fa-"]{
            font-size: 18px;
            margin: 2px 4px;
        }
</style>